<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{register.title}"></title>

    <script th:inline="javascript">
        // 等待DOM完全加载
        document.addEventListener('DOMContentLoaded', function() {
            // 确保jQuery已加载
            if (typeof $ === 'undefined') {
                console.error('jQuery is not loaded!');
                // 尝试直接使用原生JavaScript实现
                initWithoutJQuery();
            } else {
                console.log('jQuery is loaded');
                initWithJQuery();
            }
        });

        // 使用jQuery初始化
        function initWithJQuery() {
            // 生成随机验证码
            function generateVerifyCode() {
                var code = '';
                var codeLength = 6; // 验证码长度
                var chars = '0123456789'; // 只使用数字
                for (var i = 0; i < codeLength; i++) {
                    var randomIndex = Math.floor(Math.random() * chars.length);
                    code += chars.charAt(randomIndex);
                }
                return code;
            }

            // 获取验证码按钮点击事件
            var getCodeBtn = $("#get-code-btn-id");
            var codeDisplayArea = $("#code-display-area");
            if (getCodeBtn.length === 0) {
                console.error('未找到ID为get-code-btn-id的按钮');
            } else if (codeDisplayArea.length === 0) {
                console.error('未找到ID为code-display-area的元素');
            } else {
                console.log('已找到获取验证码按钮和显示区域，绑定点击事件');
                getCodeBtn.click(function () {
                    console.log('获取验证码按钮被点击');
                    // 生成并显示验证码
                    var verifyCode = generateVerifyCode();
                    console.log('生成的验证码: ' + verifyCode);

                    // 在显示区域显示验证码
                    codeDisplayArea.text(verifyCode);
                    codeDisplayArea.css({"background-color": "#f8f9fa", "color": "#dc3545", "font-weight": "bold"});
                });
            }
        }

        // 不使用jQuery初始化（备用方案）
        function initWithoutJQuery() {
            console.log('使用原生JavaScript初始化');
            // 生成随机验证码
            function generateVerifyCode() {
                var code = '';
                var codeLength = 6; // 验证码长度
                var chars = '0123456789'; // 只使用数字
                for (var i = 0; i < codeLength; i++) {
                    var randomIndex = Math.floor(Math.random() * chars.length);
                    code += chars.charAt(randomIndex);
                }
                return code;
            }

            // 获取验证码按钮点击事件
            var getCodeBtn = document.getElementById('get-code-btn-id');
            var codeDisplayArea = document.getElementById('code-display-area');
            if (!getCodeBtn) {
                console.error('未找到ID为get-code-btn-id的按钮');
            } else if (!codeDisplayArea) {
                console.error('未找到ID为code-display-area的元素');
            } else {
                console.log('已找到获取验证码按钮和显示区域，绑定点击事件');
                getCodeBtn.addEventListener('click', function () {
                    console.log('获取验证码按钮被点击');
                    // 生成并显示验证码
                    var verifyCode = generateVerifyCode();
                    console.log('生成的验证码: ' + verifyCode);

                    // 在显示区域显示验证码
                    codeDisplayArea.textContent = verifyCode;
                    codeDisplayArea.style.backgroundColor = '#f8f9fa';
                    codeDisplayArea.style.color = '#dc3545';
                    codeDisplayArea.style.fontWeight = 'bold';
                });
            }
        }
    </script>
    <style>
        body {
            display: flex;
            flex-direction: column;
        }

        body > header {
            display: flex;
            width: 100%;
            justify-content: space-between;
            padding: 10px;
            align-items: center;
            height: 100px;
        }

        body > header > img {
            height: 80px;
        }

        body > header > nav {
            width: 150px;
            display: flex;
            justify-content: space-between;
            padding-right: 20px;
        }

        body > article {
            flex-grow: 1;
            background-color: #d4efec;
            width: 100%;
            display: flex;
            align-items: center;
        }

        body > article > section {
            flex-grow: 1;
            display: flex;
        }

        body > article > form {
            flex-basis: 300px;
            margin-right: 30px;
        }

        #register-submit-id {
            width: 100%;
        }

        /* 验证码容器样式 */
        .verify-code-container {
            display: flex;
            gap: 10px;
            align-items: stretch;
        }

        #code-display-area {
            height: 34px; /* 与输入框高度一致 */
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
        }

        #get-code-btn-id {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 34px; /* 明确设置高度与输入框一致 */
            padding: 0;
        }

        /* 确保按钮与输入框样式一致 */
        #get-code-btn-id.form-control {
            color: #555;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
        }

        #get-code-btn-id.form-control:hover {
            background-color: #e6e6e6;
        }
    </style>
</head>
<body>
<header>
    <img th:if="${session.lang} eq 'en'" th:src="@{/assets/images/logo_en.png}">
    <img th:unless="${session.lang} eq 'en'" th:src="@{/assets/images/logo_zh.png}">

    <nav>
        <a th:href="@{/login/login(lang=en)}" th:text="#{login.english}"></a>
        <a th:href="@{/login/login(lang=zh)}" th:text="#{login.chinese}"></a>
    </nav>
</header>
<article>
    <section>
        <img th:src="@{/assets/images/pic.png}">
    </section>

    <form id="register-form-id" method="post">
        <div class="form-group">
            <span th:text="#{login.user.name}"></span>
            <input id="username-id" class="form-control" name="username"
                   th:placeholder="#{login.user.name.plch}"
                   th:title="#{login.user.name.plch}"
                   pattern="^.{4,}$">
        </div>

        <div class="form-group">
            <span th:text="#{login.user.password}"></span>
            <input id="password-id" class="form-control" name="password" type="password"
                   th:placeholder="#{login.password.plch}"
                   th:title="#{login.password.plch}"
                   pattern="^.{6,}$">
        </div>

        <div class="form-group">
            <span th:text="#{user.mobile}"></span>
            <div class="verify-code-container" style="margin-top: 5px;">
                <input id="mobile-id" class="form-control" name="mobile" type="tel"
                       th:placeholder="#{user.mobile.plc}"
                       th:title="#{user.mobile.plc}"
                       pattern="^[0-9]{11}$" style="flex: 2;">
                <button type="button" id="get-code-btn-id" class="form-control" th:text="#{register.get.code}" style="flex: 1;"></button>
            </div>
        </div>

        <div class="form-group">
            <span th:text="#{register.verify.code}"></span>
            <div class="verify-code-container" style="margin-top: 5px;">
                <input id="verify-code-id" class="form-control" name="verifyCode"
                       th:placeholder="#{register.verify.code.plc}"
                       th:title="#{register.verify.code.plc}"
                       pattern="^[0-9]{6}$" style="flex: 2;">
                <div id="code-display-area" class="form-control"
                     style="flex: 1; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa; color: #dc3545; font-weight: bold;">
                    [[#{register.code.empty}]]
                </div>
            </div>
        </div>

        <div style="margin-top: 15px;">
            <button type="button" id="register-submit-id" class="btn btn-success btn-group-lg"
                    th:text="#{register.submit}"></button>
        </div>
    </form>
</article>
</body>
</html>